<template>
<div class="time-line">
  <div class="time-line-item" v-for="(item, index) in data" :key="index" :style="{'animation-delay': index*seconds+'s'}">
    <div class="sign">
      <div class="dot" :style="{'animation-delay': index*seconds+'s'}"></div>
      <div class="line" v-if="index != data.length -1" >
        <div class="line-inner" :style="{'animation-delay': (index*seconds + 0.3)+'s'}"></div>
      </div>
    </div>
    <span class="title" :style="{'animation-delay': (index*seconds + 0.1)+'s'}">{{ item.title }}</span>
    <span class="text" :style="{'animation-delay': (index*seconds + 0.2)+'s'}">{{ item.remark }}</span>

  </div>
</div>
</template>

<script>
export default {
  name: "AnimationTimeline",
  props: {
    data: {
      type: Array,
      required: true
    },
    lineLength: {
      type: String,
      default: '100px'
    },
    lineThick: {
      type: String,
      default: '4px'
    },
    lineColor: {
      type: String,
      default: '#000'
    },
    direction: {
      type: String, // row||column
    }
  },
  data() {
    return {
      seconds:1,
    }
  },
  computed: {
    // 整体动画时长
    duration(){
      return this.data.length * this.seconds +'s';
    }
  },
  created() {
  },
  methods: {
  },
}
</script>

<style scoped>
.time-line{
  display: flex;
  flex-direction: v-bind(direction);
  margin:40px 0 ;
}
.time-line .time-line-item{
  position: relative;
  opacity: 0;
  animation: show 1 ease-in-out forwards;
}
.time-line .time-line-item .title{
  position: absolute;
  top: -30px;
  left: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  width: v-bind(lineLength);
  text-align: left;
  opacity: 0;
  animation: show 0.5s ease-in-out forwards;
}
.time-line .time-line-item .text{
  position: absolute;
  bottom: -30px;
  left: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #5FEEF7;
  width: v-bind(lineLength);
  text-align: left;
  opacity: 0;
  animation: show 0.5s ease-in-out forwards;
}
.time-line .time-line-item.sign{
  animation: show 0.5s ease-in-out forwards;
}
.time-line .time-line-item:last-child .title,.time-line .time-line-item:last-child .text{
  right: 0;
  left: auto;
  text-align: right;
}
.time-line .time-line-item .sign{
  display: flex;
  flex-direction: v-bind(direction);
  align-items: center;
}
 .dot{
  width: 10px;
  height: 10px;
  background: #FFFFFF;
  border-radius: 50%;
  border: 4px solid #5FEEF7;

}

.time-line .time-line-item .line{
  width: v-bind(lineLength);
  height: v-bind(lineThick);
}
.time-line .time-line-item .line .line-inner{
  width: 0;
  height: v-bind(lineThick);
  animation:lengthAnimation 0.5s ease-in-out forwards;
  background: v-bind(lineColor);
}
@keyframes show {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes lengthAnimation {
  from {
    width: 0;
  }

  to {
    width: v-bind(lineLength);
  }
}
</style>
